<template>
  <div id="app">
    <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
                     :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
        <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
      </template>
    </v-form-designer>

  </div>
</template>

<script>
/* eslint-disable */
  export default {
    name: 'App',
    data () {
      return {
        fieldListApi: {
          URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
          labelKey: 'fieldLabel',
          nameKey: 'fieldName'
        },

        testBanned: [
          // 'sub-form',
          // 'alert',
        ],

        designerConfig: {
          languageMenu: false,
          toolbarMaxWidth:500,
          // externalLink: true,
          // formTemplates: true,
          // eventCollapse: true,
          // clearDesignerButton: true,
          // previewFormButton: true,

          // presetCssCode: '.main-header { height: 100px; }',
        }
      }
    },
    methods: {
      saveFormJson () {
        let formJson = this.$refs.vfDesigner.getFormJson()
        console.log(formJson)
        // TODO: 将formJson提交给后端保存接口，需自行实现！！
        this.$message.success('表单已保存！')
      }

    }
  }
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
